/***
 *  跨组件传参
 *  context
 *  1、导入createContext
 *  2、生成一个context
 *  3、通过context中的provider将参数注入到下级组件
 *  4、通过context中的consumer获取参数
 */

import { Component, createContext } from 'react'
const Context = createContext()
const { Provider, Consumer } = Context
export default class GrandFather extends Component {
  state = {
    money: 100
  }
  render() {
    return (
      <div>
        爷爷有:{this.state.money}
        {/* <Context.Provider value={this.state.money}> */}
        <Provider value={this.state.money}>
          <Father></Father>
        </Provider>
        {/* </Context.Provider> */}
      </div>
    )
  }
}
class Father extends Component {
  render() {
    return (
      <div>
        爸爸
        <Son></Son>
      </div>
    )
  }
}
class Son extends Component {
  // 方法二 静态成员
  static contextType = Context
  render() {
    return (
      <div>
        {/* 孙子获取到爷爷给的钱:{this.context} */}
        孙子获取到爷爷给的钱:
        {/* 方法一：通过consumer获取 */}
        {/* <Context.Consumer>{(value) => value}</Context.Consumer> */}
        <Consumer>{(value) => value}</Consumer>
      </div>
    )
  }
}
